<template>
  <div id='tmpl'>
      <!--1.0商品轮播图-->
      <div class="slider">
            <slider :imgs="imgs"></slider>
      </div>
      <!--2.0实现商品购买区-->
      <div id="buy">
          <h4 v-text="info.title"></h4>
          <p class="line"></p>
          <ul>
              <li class="price">市场价：<s>￥{{info.market_price}}</s> 销售价：<span>￥{{info.market_price}}</span></li>
              <li class="inputli">
                  购买数量：<inputNumber class="inputnumber" v-on:dataobj="getcount" :repertory1="repertory"></inputNumber>
                  <transition name="show" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
                     <div v-if="isshow" class="ball"></div>
                  </transition>
              </li>
              <li>
                  <mt-button type="primary" size="small">立即购买</mt-button>
                  <mt-button type="danger" size="small" @click="toshopcar">加入购物车</mt-button>
              </li>
          </ul>
      </div>
      <div id="params">
          <h6>商品参数</h6>
          <p class="line"></p>
          <ul>
              <li>商品货号：{{info.goods_no}}</li>
              <li>库存情况：{{info.stock_quantity}}件</li>
              <li>上架时间：{{info.add_time | datefmt('YYYY-MM-DD')}}</li>
          </ul>
      </div>
      <!--3.0图片详情、商品评论-->
      <div id="other">
          <router-link v-bind="{to:'/goods/goodsdesc/'+id}">
                <mt-button class="imgdesc" type="primary" size="large">图文详情</mt-button>
          </router-link>
          <router-link v-bind="{to:'/goods/goodscomment/'+id}">
                <mt-button type="danger" size="large">商品评论</mt-button>
          </router-link>  
      </div>
  </div>
</template>
<script>
import slider from '../subcom/slider.vue';
import common from '../../kits/common.js';
import inputNumber from '../subcom/inputNumber.vue';
import {Toast} from 'mint-ui';
//使用vm对象
import {vm,COUNTSTR} from '../../kits/vm.js';
import {setItem,valueObj} from '../../kits/localstorage.js'
export default {
    components:{
        slider,
        inputNumber
    },
    data () {
        return {
            isshow:false, //控制小球的显示状态
            inputNumberCount:1,//表示当前购买商品的数量
            repertory:0, //库存
            id:0, //商品id
            imgs:[],
            info:{}     
        };
    },
    created(){
        //获取商品id
        this.id = this.$route.params.id;
        this.getimgs();
        this.getinfo();
    },
    methods:{
        //定义动画3个方法
        beforeEnter(el){
            //设置小球的初始位置
            el.style.transform = "translate(0px,0px)";

        },
        enter(el,done){
            //保证小球出现动画
            el.offsetWidth;
            //设置小球的结束位置
            el.style.transform = "translate(80px,366px)";
            //结束动画
            done();

        },
        afterEnter(el){
            //重置小球的初始状态
            this.isshow = !this.isshow;
        },
        //点击加入购物车
        toshopcar(){
            //1.0触发事件
            vm.$emit(COUNTSTR,this.inputNumberCount);
            //2.0将数据保存到localStorage中
            valueObj.goodsid = this.id;
            valueObj.count = this.inputNumberCount;
            setItem(valueObj);
            //3.0实现小球动画
            this.isshow = !this.isshow;

        },
        //获取inputnumber组件中传入的值
        getcount(count){
            this.inputNumberCount = count;
        },
        // 获取商品详细描述
        getinfo(){
            var url = common.apidomain+ '/api/goods/getinfo/'+this.id;
            this.$http.get(url).then(function(res){
                if(res.body.status != 0){
                    Toast('出错了');
                    return;
                }
                this.info = res.body.message[0];
                this.repertory=res.body.message[0].stock_quantity;
            })
        },
        //获取轮播图
        getimgs(){
            var url = common.apidomain + "/api/getthumimages/"+this.id;
            this.$http.get(url).then(function(res){
                if(res.body.status != 0){
                    Toast('出错了');
                    return;
                }
                this.imgs = res.body.message;
                
            })
        }
    }
}
</script>
<style lang="css" scoped>
    .slider{
        border:1px solid rgba(0,0,0,0.4);
        border-radius:5px;
        margin:5px;
    }
    #buy,#params,#other{
        border:1px solid rgba(0,0,0,0.4);
        border-radius:5px;
        margin:5px;
        padding:5px;
    }
    .line{
        height:1px;
        border:1px solid rgba(0,0,0,0.3);
    }
    #buy h4{
        color:#0094ff;
        padding:5px;
    }
    #buy ul,#params ul{
        padding-left:0;
    }
    #buy li,#params li{
        list-style:none;
        padding:8px;
    }
    #buy .price span{
        color:red;
    }
    .imgdesc{
        margin-bottom:15px;
    }
    .inputli{
        position:relative;
    }
    .inputnumber{
        position:absolute;
        top:4px;;
        left:100px;
    }
    .ball{
        height:20px;
        width:20px;
        border-radius: 50%;
        background-color:red;
        position:absolute;
        top: 20px;
        left:100px;
        transition:all 0.4s ease;
        z-index:100;
    }
</style>